<template>
  <div class="page-wrap">
    <div class="page-content" style="height: calc(70vh - 74px); overflow: auto; background-color:var(--modal-bgcolor)">
      <div class="content-wrap">
        <Row :gutter="16" style="height: 100%">
          <Col span="6" style="height: 100%">
            <h4 style="height: 33px; line-height: 33px; margin-bottom: 20px">
              段落列表
            </h4>
            <div class="left-hei">
              <Card
                v-for="(item, index) in sectionData"
                :key="item.sectionid"
                style="margin-bottom: 15px; cursor: pointer"
                :class="{
                  titleActive: sectionId && item.sectionid == sectionId,
                }"
              >
                <div class="title-content" @click="echoData(item)">
                  <div class="title-name">
                    <img
                      title="关键点"
                      height="16"
                      :style="{
                        'margin-right': '5px',
                        visibility:
                          item.ischeckpoint == 1 ? 'visile' : 'hidden',
                      }"
                      src="../../../../../assets/globalIcon/section-key.png"
                    />
                    <div style="font-weight: bold; font-size: 16px; flex: none">
                      第{{ index + 1 }}节
                    </div>
                    <Divider type="vertical" />
                    <div
                      class="text-ellipsis"
                      style="flex: auto; max-width: 80px"
                    >
                      {{ escape2Html(item.sectionname) }}
                    </div>
                  </div>
                  <div>
                    <img
                      src="../../../../../assets/globalIcon/dis-del.png"
                      @click.stop="showDelSectionPop(item)"
                      v-if="guideInfo.expUsed"
                    />
                    <Poptip
                      v-model="item.visibleDelSectionPop"
                      transfer
                      confirm
                      placement="left"
                      title="确定要删除该段落吗？"
                      @on-ok="delSection(item)"
                      v-else
                    >
                      <div>
                        <img
                          src="../../../../../assets/globalIcon/del.png"
                          @click.stop="showDelSectionPop(item)"
                        />
                      </div>
                    </Poptip>
                  </div>
                </div>
              </Card>
            </div>
            <!-- <div
                            style="margin-top: 15px;display: flex;justify-content: space-between;align-items: center"
                        >
                            <div></div>
                            <div>
                                <Button type="primary" size="large" @click="returnImage"
                                    >完成</Button
                                >
                            </div>
                        </div> -->
          </Col>
          <Col span="18" style="height: 100%">
            <Form
              ref="formValidate"
              :model="formValidate"
              :rules="ruleValidate"
              :label-width="100"
            >
              <FormItem
                label="名称"
                prop="name"
                style="width: 400px; display: inline-block; margin-left: 48px"
              >
                <Input
                  v-model.trim="formValidate.name"
                  placeholder="名称"
                ></Input>
              </FormItem>
              <!--<FormItem label="类型" prop="sectionType" style="width: 300px;display: inline-block">
                            <Select filterable v-model="formValidate.sectionType" placeholder="类型">
                                <Option value="1">多媒体</Option>
                                <Option value="2">简单文本</Option>
                                <Option value="3">试题</Option>
                                <Option value="4">简单文本+试题</Option>
                            </Select>
                        </FormItem>-->
              <FormItem
                label="关键点"
                prop="IsCheckpoint"
                style="width: 200px; display: inline-block"
              >
                <RadioGroup v-model="formValidate.IsCheckpoint">
                  <Radio label="1">是</Radio>
                  <Radio label="0">否</Radio>
                </RadioGroup>
              </FormItem>
              <!--<FormItem label="排序" prop="no" style="display: inline-block">
                            <InputNumber :max="99" :min="1" v-model="formValidate.no" style="width: 200px;" placeholder="请输入1-100的整数"></InputNumber>-->
              <!--<span style="color:#f90;font-size:10px;line-height: 2;"><Icon type="ios-information-circle-outline" />{{useNos}}已经被使用</span>-->
              <!--</FormItem>-->
              <FormItem>
                <quill-editor
                  v-model="content"
                  class="editor"
                  ref="myQuillEditor"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)"
                >
                </quill-editor>
              </FormItem>
              <div class="flex-between" style="margin-left: 100px">
                <div>
                  <Button
                    type="primary"
                    @click="creatBtn('formValidate')"
                    :loading="subLoading"
                    :disabled="sectionData.length > 98 || guideInfo.expUsed"
                    >新建章节</Button
                  >
                  <Button
                    type="primary"
                    @click="modifyBtn('formValidate')"
                    :loading="subLoading"
                    style="margin-left: 8px"
                    >编辑章节</Button
                  >
                  <Button
                    @click="handleReset('formValidate')"
                    style="margin-left: 8px"
                    :disabled="guideInfo.expUsed"
                    >重置</Button
                  >
                </div>
                <div class="question-btn-wrap flex">
                  <Tooltip
                    transfer
                    max-width="300"
                    content="创建题目前请先选择段落，每个段落最多可创建5个题目"
                  >
                    <Icon
                      type="ios-information-circle"
                      :size="18"
                      style="color: #f90"
                  /></Tooltip>
                  <Button
                    type="primary"
                    @click="showAddQuestionModal"
                    :disabled="
                      !sectionId || questionTotal >= 5 || guideInfo.expUsed
                    "
                    style="float: right"
                    >创建题目</Button
                  >
                </div>
              </div>
            </Form>
            <div style="margin-left: 100px">
              <Divider v-show="questionTotal > 0">段落题目</Divider>
              <section-question
                ref="showSectionQuestion"
                @getQuestionTotal="setQuestionTotal"
                :sectionId="sectionId"
                :guideID="guideId"
                :expUsed="guideInfo.expUsed"
                :isPublic="guideInfo.ispublic"
                :isOwn="isOwn"
                v-if="sectionId && guideId"
                v-show="questionTotal > 0"
              >
              </section-question>
            </div>
          </Col>
        </Row>
      </div>
    </div>

    <!--图片列表-->
    <Modal
      v-model="showImglist"
      width="1000"
      :footer-hide="true"
      :mask-closable="false"
      title="图片列表(指导书的可见范围为单位时,不允许选择个人资源)"
    >
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
        "
      >
        <div>
          <Input
            v-model.trim="searchFileName"
            placeholder="名称"
            style="width: 180px"
            clearable
            @on-change="searchFile"
          />
          <Select filterable
            clearable
            v-model="searchFilePublic"
            placeholder="请选择可见范围"
            style="width: 150px; margin-left: 15px"
            @on-change="searchFile"
          >
            <Option value="public">系统</Option>
            <Option value="share">单位</Option>
            <Option value="private">个人</Option>
          </Select>
        </div>
        <Page
          :total="videoTotal"
          :page-size="videoPageSize"
          :current="videoPage"
          show-total
          v-if="videoTotal"
          show-elevator
          @on-change="videoOnChange"
        />
      </div>
      <Table
        border
        :columns="videoCol"
        :data="videoList"
        :loading="fileListLoading"
      ></Table>
    </Modal>
  </div>
</template>
<script>
import $ from 'jquery';
import {validateName128,validateNameCustom } from '@/libs/reg.js'
import encryption from '@/libs/encryption.js';
import { addQuillTitle } from '@/libs/quill-title';
import {
    sectionList,
    creatSection,
    modifySection,
    delSection,
    getGuideInfoByID
} from '@/api/guide.js';
import { getFilesData } from '@/api/uploadFile.js';
import cookieUse from '@/libs/cookie.js';
import Quill from 'quill';
import { quillEditor } from 'vue-quill-editor'; // 调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
// 粘贴图片导入
import { ImageExtend } from './image-parse';
Quill.register('modules/ImageExtend', ImageExtend);
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/ImageResize', ImageResize);
import SectionQuestion from './sectionQuestion';
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    ['blockquote', 'code-block'], // 引用  代码块
    [
        {
            header: 1
        },
        {
            header: 2
        }
    ], // 1、2 级标题
    [
        {
            list: 'ordered'
        },
        {
            list: 'bullet'
        }
    ], // 有序、无序列表
    [
        {
            script: 'sub'
        },
        {
            script: 'super'
        }
    ], // 上标/下标
    [
        {
            indent: '-1'
        },
        {
            indent: '+1'
        }
    ], // 缩进
    // [{'direction': 'rtl'}],                         // 文本方向
    [
        {
            size: ['small', false, 'large', 'huge']
        }
    ], // 字体大小
    [
        {
            header: [1, 2, 3, 4, 5, 6, false]
        }
    ], // 标题
    [
        {
            color: []
        },
        {
            background: []
        }
    ], // 字体颜色、字体背景颜色
    //    [{ font: [] }], // 字体种类
    [
        {
            align: []
        }
    ], // 对齐方式
    ['clean'], // 清除文本格式
    ['link', 'image'] // 链接、图片、视频
];
export default {
    name: 'Section',
    props: ['guideId', 'guideName'],
    components: {
        quillEditor,
        SectionQuestion
    },
    data() {
        const validateNum = (rule, value, callback) => {
            //验证只能填入数字
            var reg = new RegExp('^([1-9]|[1-9]\\d|100)$');
            let _this = this;
            //验证警戒值
            if (value || value === 0) {
                if (!reg.test(_this.formValidate.no)) {
                    callback(new Error('请输入1-100的整数'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        const validateName = (rule, value, callback) => {
            let reg = /[\\/:*?"<>|]/gi;
            if (value) {
                if (reg.test(value) || value.length < 1 || value.length > 128) {
                    callback(new Error('不能包含 \\ / : * ? " < > | 符号，长度为1-128个字符'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        let September = sessionStorage.getItem('November');
        September = JSON.parse(encryption.SelfUseDecrypt(September));
        return {
            USER_ID: September.userId,
            fullHeight: document.documentElement.clientHeight,
            fullWidth: document.documentElement.clientWidth,
            contentHei: 'auto',
            // 页面标题
            titleText: '段落管理',
            // 指导书id
            guidbookname: '',
            //指导书，题目显示宽度
            sectionEditWidth: '75%',
            sectionQuesWidth: '25%',
            expandSectionQues: true,
            // 段落列表
            sectionData: [],
            // 创建段落
            formValidate: {
                name: '',
                sectionType: '2',
                IsCheckpoint: '1',
                no: 1
            },
            ruleValidate: {
                name: [
                    {
                        required: true,
                        max: 128,
                        message: '段落名称长度为1—128个字符',
                        trigger: 'change'
                    },
                    { validator: validateName, trigger: 'change' }
                ],
                orderNum: [
                    {
                        required: true
                    }
                ],
                sectionType: [
                    {
                        required: true,
                        message: '请选择类型',
                        trigger: 'change'
                    }
                ],
                IsCheckpoint: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                no: [
                    {
                        required: true,
                        type: 'number',
                        max: 100,
                        min: 1,
                        validator: validateNum,
                        trigger: 'change'
                    }
                ]
            },
            content: '',
            editorOption: {
                modules: {
                    clipboard: {
                        // 粘贴过滤
                        //			              matchers: [[Node.ELEMENT_NODE, this.HandleCustomMatcher]],
                        //			              matchVisual: false
                    },
                    toolbar: {
                        container: toolbarOptions, //工具菜单栏配置
                        handlers: {
                            image: (value) => {
                                if (value) {
                                    this.insertImg();
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    },
                    ImageExtend: {
                        loading: true,
                        name: 'file',
                        size: 2,
                        sizeError: () => {
                            this.$Message.error('图片大小不能超过2M');
                        },
                        headers: (xhr) => {
                            xhr.setRequestHeader(
                                'Authorization',
                                cookieUse.getCookie('desig-token')
                            );
                        }, // 可选参数 设置请求头部
                        start: () => {
                            //开始导入触发事件
                        },
                        change: (xhr, FormData) => {},
                        action:
                            '/api/minio/upload/permanent?visibility=company&type=images&bucket=images',
                        error: () => {
                            this.$Message.error('文件导入失败');
                        },
                        response: (res) => {
                            if (res.code == 1) {
                                let src = res.data;
                                return `/Learn/${src}`;
                            } else if (res.code == -9599) {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 2
                                });
                                setTimeout(() => {
                                    // this.$router.push({
                                    //     path: '/login'
                                    // });
                                    cookieUse.setCookie('desig-token', '', 0);
                                    window.openLogin(this.$router)
                                }, 2000);
                            } else {
                                this.$Message.error('文件导入失败');
                            }
                        }
                    },
                    ImageResize: {
                        displayStyles: {
                            //创建
                            zIndex: 0
                        },
                        modules: ['Resize', 'DisplaySize']
                        // See optional "config" below
                    }
                },
                placeholder: '可以在编辑器直接贴图' //提示
            },
            subLoading: false,
            // 编辑插入图片
            showImglist: false,
            videoPage: 1,
            videoPageSize: 10,
            videoList: [],
            videoTotal: 0,
            videoCol: [
                {
                    title: '名称',
                    key: 'originName',
                    align: 'left'
                },
                {
                    title: 'ID',
                    key: 'id',
                    align: 'left'
                },
                {
                    title: '文件大小',
                    key: 'size',
                    align: 'left',
                    width: 120,
                    render: (h, params) => {
                        return h('span', this.getSize(params.row.size));
                    }
                },
                {
                    title: '可见范围',
                    key: 'visibility',
                    align: 'left',
                    width: 80,
                    render: (h, params) => {
                        return h(
                            'span',
                            {
                                style: {
                                    color: this.setVisibility(params.row.visibility).color
                                }
                            },
                            this.setVisibility(params.row.visibility).text
                        );
                    }
                },
                {
                    title: '内容',
                    key: 'check',
                    align: 'left',
                    width: 100,
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'a',
                                {
                                    on: {
                                        click: () => {
                                            this.checkInfo(params);
                                        }
                                    }
                                },
                                '查看'
                            )
                        ]);
                    }
                },
                // {
                //     title: '创建时间',
                //     key: 'created',
                //     align: 'left'
                // },
                {
                    title: '操作',
                    key: 'action',
                    width: 100,
                    align: 'left',
                    render: (h, params) => {
                        return h('div', [
                            [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'info',
                                            size: 'small',
                                            disabled:
                                                params.row.visibility == 'private' &&
                                                (this.guideInfo.ispublic === 1 || !this.isOwn)
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.useImg(params);
                                            }
                                        }
                                    },
                                    '使用'
                                )
                            ]
                        ]);
                    }
                }
            ],
            videoData(val) {
                let data = [];
                for (let i = 0; i < val.length; i++) {
                    let fileName = val[i]['fileName'];
                    fileName = fileName.split('.')[0];
                    data.push({
                        fileName: fileName,
                        filePath: val[i]['filePath'],
                        fileType: val[i]['fileType'],
                        fileTime: val[i]['fileTime'],
                        fileId: val[i]['fileId'],
                        fileSize: val[i]['fileSize']
                    });
                }
                return data;
            },
            fileListLoading: false,
            searchFileName: '',
            searchFilePublic: '',
            // 记录回显的数据
            orderNum: 0,
            sectionId: '',
            isCreat: true,
            btnText: '新建提交',
            showAddQuestion: false,
            showTab: 'info',
            questionTotal: 0,
            guideInfo: {} //指导书详情
        };
    },
    created() {},
    computed: {
        useNos: function() {
            return [...new Set(this.sectionData.map((section) => section.no))].join(',');
        },
        isOwn: function() {
            return this.USER_ID == this.guideInfo.designer;
        }
    },
    mounted() {
        this.setStyle();
        window.onresize = () => {
            this.setStyle();
        };
        // this.$store.commit('queryExpQuestionDetail', { name: this.guideName });
        // 查询段落信息
        this.queryList();
        //获取指导书详情
        this.getGuideInfo();
        addQuillTitle();
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/guide') {
            to.query.page = this.$route.query.page;
            next();
        } else {
            sessionStorage.removeItem('queryObj');
            next();
        }
    },
    methods: {
        // 设置高度
        setStyle() {
            window.fullHeight = document.documentElement.clientHeight;
            window.fullWidth = document.documentElement.clientWidth;
            this.fullHeight = window.fullHeight;
            this.fullWidth = window.fullWidth;
            this.contentHei = this.fullHeight - 60 - 21 + 'px'; // 80是头部高度  60是上下padding
            let hei = this.fullHeight - 60 - 21 - 96 - 114 - 74 + 'px';
            $('.content-wrap .ql-container').css('height', 'calc(70vh - 270px)');
            $('.content-wrap .ql-container').css('min-height', '200px');
        },
        // 返回指导书管理
        returnImage() {
            this.$router.push({
                name: 'guide',
                query: {
                    page: this.$route.query.page
                }
            });
        },
        // 段落列表
        queryList() {
            if (!this.guideId) {
                return;
            }
            sectionList(this.guideId)
                .then((data) => {
                    if (data.code == 1) {
                        this.sectionData = data.attribute.datalist;
                        this.$emit('on-success', this.sectionData);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        initData() {
            this.formValidate.name = '';
            this.content = '';
            this.sectionId = '';
            let noArr = this.sectionData
                .map((sec) => sec.no)
                .sort((a, b) => {
                    return a - b;
                });
            if (noArr.length > 0 && !this.sectionId) {
                this.formValidate.no = noArr[noArr.length - 1] + 1;
            }
        },
        getGuideInfo() {
            if (!this.guideId) {
                return;
            }
            getGuideInfoByID(this.guideId)
                .then((data) => {
                    if (data.code == 1) {
                        this.guideInfo = data.attribute.data;
                    } else {
                        this.guideInfo = {};
                        this.$Message.error(data.message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        // 编辑器
        onEditorBlur() {}, // 失去焦点事件
        onEditorFocus() {}, // 获得焦点事件
        onEditorChange() {}, // 内容改变事件
        // 插入图片
        insertImg() {
            this.showImglist = true;
            this.searchFileName = '';
            this.searchFilePublic = '';
            this.getVideoList();
        },
        getVideoList() {
            let params = {
                pageIndex: this.videoPage,
                pageSize: this.videoPageSize
            };
            let data = {
                bucket: 'images'
            };
            if ($.trim(this.searchFileName) != '') {
                data.originName = $.trim(this.searchFileName);
            }
            if (this.searchFilePublic) {
                data.visibility = this.searchFilePublic;
            }
            this.fileListLoading = true;
            getFilesData(params, data)
                .then((res) => {
                    if (res.data.code == 1) {
                        let attribute = res.data.data;
                        this.videoTotal = attribute.total;
                        this.videoList = attribute.list;
                    }
                    this.fileListLoading = false;
                })
                .catch((err) => {
                    this.fileListLoading = false;
                });
        },
        videoOnChange(val) {
            this.videoPage = val;
            this.getVideoList();
        },
        searchFile(val) {
            this.videoPage = 1;
            this.getVideoList();
        },
        checkInfo(params) {
            let path = params.row.path;
            window.openTrain(`/api/minio/filePreview?path=${path}`);
        },
        // 使用
        useImg(params) {
            // 获取富文本组件实例
            let quill = '';
            if (this.showImglist) {
                quill = this.$refs.myQuillEditor.quill;
            }
            // if(this.reSectionModal){
            //     quill = this.$refs.reQuillEditor.quill
            // }
            // 获取光标所在位置
            let selction = quill.getSelection() || {};
            let length = selction.index ? selction.index : 0;
            // 插入图片，res为服务器返回的图片链接地址
            let url = `/Learn${params.row.path}`;
            quill.insertEmbed(length, 'image', url);
            // 调整光标到最后
            quill.setSelection(length + 1);
            this.showImglist = false;
        },
        // 回显
        echoData(item) {
            this.isCreat = false;
            this.btnText = '编辑提交';
            this.orderNum = item.no;
            this.sectionId = item.sectionid;
            this.formValidate.name = this.escape2Html(item.sectionname);
            this.formValidate.sectionType = item.sectiontype + '';
            this.formValidate.IsCheckpoint = item.ischeckpoint + '';
            this.formValidate.no = item.no;
            setTimeout(() => {
                this.content = item.sectiontext;
                // console.log(this.content);
            });
        },
        // 创建按钮
        creatBtn(name) {
            this.isCreat = true;
            this.submitBtn(name);
        },
        html2Escape(str) {
            let arrEntities = {
                '<': '&lt',
                '>': '&gt',
                ' ': '&nbsp',
                '&': '&amp',
                '"': '&quot'
            };
            return str
                .replace(/\&nbsp;/g, ' ')
                .replace(/\&/g, '&amp;')
                .replace(/\</g, '&lt;')
                .replace(/\>/g, '&gt;')
                .replace(/\ /g, '&nbsp;')
                .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;'); //.replace(/\"/g, "&quot;");
            //return str.replace(/&(\<|\>|\ |\&|\");/ig,function(all,t){return arrEntities[t];});
        },
        escape2Html(str) {
            //'nbsp':' ',
            if (!str) {
                return;
            }
            let arrEntities = {
                lt: '<',
                gt: '>',
                nbsp: ' ',
                amp: '&',
                quot: '"'
            };
            return str.replace(/&(lt|gt|amp|quot|nbsp);/gi, function(all, t) {
                return arrEntities[t];
            });
        },
        // 编辑提交
        modifyBtn(name) {
            if (this.sectionId) {
                this.isCreat = false;
                this.submitBtn(name);
            } else {
                this.$Message.info({
                    content: '请选择需要编辑的段落',
                    duration: 3
                });
            }
        },
        // 提交按钮
        submitBtn(name) {
            if (this.isCreat) {
                this.handleSubmit(name);
            } else {
                this.modifySubmit(name);
            }
        },
        // 创建段落
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                //              	if(this.useNos.includes(this.formValidate.no)){
                //		      			this.$Message.warning('排序已经被使用');
                //		      			return;
                //		      		}
                if (valid) {
                    let formData = {};
                    formData.sectionname = this.formValidate.name;
                    formData.sectioncname = this.formValidate.name;
                    let noArr = this.sectionData
                        .map((sec) => sec.no)
                        .sort((a, b) => {
                            return a - b;
                        });
                    if (noArr.length > 0) {
                        formData.no = noArr[noArr.length - 1] + 1;
                    } else {
                        formData.no = 1;
                    }
                    //formData.no = this.formValidate.no; //this.sectionData.length + 1;
                    formData.sectiontype = parseInt(this.formValidate.sectionType);
                    formData.ischeckpoint = parseInt(this.formValidate.IsCheckpoint);
                    formData.sectiontext = this.html2Escape(
                        this.content.replace(
                            /class="ql-syntax"/g,
                            'style="background-color: #23241f;color: #f8f8f2;white-space: pre-wrap;margin-bottom: 5px;margin-top: 5px;padding: 5px 10px;border-radius: 3px;"'
                        )
                    );
                    // 手动加
                    formData.dirlevel = 1;
                    formData.guidbookid = this.guideId;
                    formData.updatetime = '';
                    this.subLoading = true;
                    creatSection(formData)
                        .then((data) => {
                            if (data.code == 1) {
                                this.queryList();
                                this.$Message.success({
                                    content: '创建成功！',
                                    duration: 3
                                });
                                this.sectionId = '';
                                this.content = '';
                                this.handleReset('formValidate');
                            } else {
                                this.$Message.error('创建失败！');
                            }
                            this.subLoading = false;
                        })
                        .catch((err) => {
                            this.subLoading = false;
                            console.log(err);
                        });
                } else {
                    this.$Message.error('请完善信息！');
                }
            });
        },
        handleReset(name) {
            this.content = '';
            this.$refs[name].resetFields();
        },
        // 编辑段落
        modifySubmit(name) {
            this.$refs[name].validate((valid) => {
                if (
                    this.useNos.includes(this.formValidate.no) &&
                    this.formValidate.no != this.orderNum
                ) {
                    this.$Message.warning('排序已经被使用');
                    return;
                }
                if (valid) {
                    let formData = {};
                    formData.sectionname = this.formValidate.name;
                    formData.sectioncname = this.formValidate.name;
                    formData.sectiontype = parseInt(this.formValidate.sectionType);
                    //                      formData.no = this.orderNum;
                    formData.ischeckpoint = parseInt(this.formValidate.IsCheckpoint);
                    formData.sectiontext = this.html2Escape(
                        this.content.replace(
                            /class="ql-syntax"/g,
                            'style="background-color: #23241f;color: #f8f8f2;white-space: pre-wrap;margin-bottom: 5px;margin-top: 5px;padding: 5px 10px;border-radius: 3px;"'
                        )
                    );
                    formData.no = this.formValidate.no;
                    formData.guidbookid = this.guideId;
                    modifySection(formData, this.sectionId)
                        .then((data) => {
                            if (data.code == 1) {
                                this.$Message.success({
                                    content: '编辑成功！',
                                    duration: 3
                                });
                                //                                  this.sectionId = ''
                                this.queryList();
                            } else {
                                this.$Message.error({
                                    content: '编辑失败！',
                                    duration: 3
                                });
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                } else {
                    this.$Message.error('请完善信息！');
                }
            });
        },
        // 删除段落
        delSection(item) {
            delSection(item.sectionid)
                .then((data) => {
                    if (data.code === 1) {
                        this.$Message.success({
                            content: data.message,
                            duration: 3
                        });
                        this.formValidate.name = '';
                        this.formValidate.sectionType = '2';
                        this.formValidate.IsCheckpoint = '1';
                        this.content = '';
                        this.queryList();
                    } else {
                        this.$Message.error({
                            content: data.message,
                            duration: 3
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        showAddQuestionEle() {
            this.showAddQuestion = true;
        },
        showAddQuestionModal() {
            if (!this.sectionId) {
                this.$Message.warning({
                    content: '请先选择段落',
                    duration: 3
                });
                return;
            }
            this.showAddQuestion = true;
            this.$refs.showSectionQuestion.addObjectiveQuestion('', 'add');
        },
        setQuestionTotal(count) {
            this.questionTotal = count;
        },
        changeTab(tab) {
            this.showTab = tab;
        },
        showDelSectionPop(item) {
            this.sectionData.forEach((section) => {
                this.$set(section, 'visibleDelSectionPop', false);
            });
            this.$set(item, 'visibleDelSectionPop', true);
        },
        HandleCustomMatcher(node, Delta) {
            // 文字、图片等，从别处复制而来，清除自带样式，转为纯文本
            let ops = [];
            Delta.ops.forEach((op) => {
                if (op.insert && op.insert != '' && !op.insert.image) {
                    //&& typeof op.insert === 'string' &&
                    ops.push(op);
                    //		          ops.push({
                    //		            insert: op.insert
                    //		          })
                }
            });
            console.log(op);
            Delta.ops = ops;
            return Delta;
        },
        // 设置可见范围
        setVisibility(val) {
            let obj = {};
            let text = '';
            let color = '';
            if (val === 'share') {
                text = '单位';
                color = '#32CD32';
            } else if (val === 'private') {
                text = '个人';
                color = '#FFA500';
            } else if (val === 'public') {
                text = '系统';
                color = '#4169E1';
            }
            obj.text = text;
            obj.color = color;
            return obj;
        },
        getSize(val) {
            let type = '';
            if (val > 1024 * 1024) {
                val = val / (1024 * 1024);
                type = ' MB';
            } else {
                val = val / 1024;
                type = ' KB';
            }
            val = val.toFixed(2);
            return val + '' + type;
        }
    }
};
</script>
<style scoped>
.page-wrap {
  height: calc(70vh - 78px);
  /* padding: 15px 30px 30px 30px; */
}

.page-content {
  /* background-color: #fff; */
  border-radius: 10px;
  background-color:var(--modal-bgcolor) !important;
}

.img-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 0 20px;
}

.addressIcon {
  display: inline-block;
  height: 14px;
  width: 12px;
  background: url("../../../../../assets/globalIcon/addressIcon.png") no-repeat
    center;
  background-size: 100% 100%;
  margin-bottom: -1px;
}

.content-wrap {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 20px;
  /* height: calc(100% - 96px); */
}

.left-hei {
  overflow-x: hidden;
  overflow-y: auto;
  /*padding-right: 8px;*/
  max-height: calc(100% - 66px);
  /*padding-top: 17px;*/
}
.title-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  overflow: hidden;
}

.titleActive {
  border: 1px solid #1563C2 ;
}

.title-name {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.page-wrap /deep/.editor .ql-container.ql-snow {
  overflow: hidden auto;
  /* border: 1px solid #ccc; */
}

.page-wrap /deep/.editor .ql-editor {
  overflow: auto;
}
.page-wrap /deep/.editor .ql-container {
  height: 400px !important;
}
</style>
<style>
.left-hei .ivu-card {
  position: inherit;
}

.left-hei .ivu-card-body {
  padding: 0 16px;
}
</style>
